﻿
$(function() {

	$( "#catalog" ).accordion();
	$( "#catalog li" ).draggable({
		appendTo: "body",
		helper: "clone",
		cursor: "move",
		cursorAt: { top: 4, left: 4 }
	})

	$("#layoutui ol li").droppable({
		hoverClass: "ui-state-hover",
		accept: "#columnname_datadiv li",
		//greedy: true,
		drop: function( event, ui ){
			column_droppable($(this),event, ui);
		}
	});


	$("#layoutui ol li").resizable({
		grid: 1,
		resize:function(event, ui) {
			var style = $(this).attr("style");
		}
	});
	$("#layoutui ol li").bind('click',function(){
		var column = $(this);
		var element = $(this).find("input");
		var label = $(this).find("label");
		columnClickEvent(column,element,label);
	});


	$("#layoutui ol").droppable({
		accept: "#catalog li",
		drop: function( event, ui ) {
			//$(this).find( ".placeholder" ).remove();
			var which = ui.draggable.text();
			var column = null;
			var clearDiv = $('<div class="clear_div"></div>');


			if(which=='text'){
				var column = $('<li class="ui-state-default" style="width:300px; height:30px;"></li>');
				var label = $('<label>'+which+'</label>');
				label.appendTo(column);
				column.appendTo( this );
				column.dblclick(function(){editTextUI(column,label);});
			}

			if(which=='chart'){
				var column = $('<li class="ui-state-default" style="width:300px; height:200px;"></li>');
				var iframe = $('<iframe/>').attr({
					id : "aaa",
					name : "aaa",
					width : '100%',
					height : '100%',
					frameborder : 0,
					scrolling:'yes',
					src:'multi.jsp?_keyRandom=20161104142000001&_chartType=msspline'
				});
				column.append(iframe).appendTo( this );
				column.dblclick(function(){editChartUI(column,iframe);});
			}

			if(which=='image'){
				var column = $('<li class="ui-state-default" style="width:200px; height:200px;"></li>');
				var img = $('<img/>').attr({
					"width" : "100%",
					"height" : "100%",
					"src":"https://www.ydcard.com/view_image/20140108155402.jpg"
				});
				column.append(img).appendTo( this );
				column.dblclick(function(){editImgUI(column,img);});
			}


			//新加的控件加事件
			column.droppable({
				activeClass: "ui-state-default",
				hoverClass: "ui-state-hover",
				accept: "#columnname_datadiv li",
				drop: function( event, ui ){
					column_droppable($(this),event, ui);
				}
			});

			//li div resize
			column.resizable({
				grid: 1,
				resize:function(event, ui) {
					var style = $(this).attr("style");
					//$("#contorller_div_style").textbox("setValue",style);
				}
			});

		}
	});


	$( "#layoutui ol" ).sortable({
		items: "li",
		placeholder: "ui-state-highlight",
		connectWith: ".connectedSortable",
		sort: function() {
			// 获取由 droppable 与 sortable 交互而加入的条目
			// 使用 connectWithSortable 可以解决这个问题，但不允许您自定义 active/hoverClass 选项
			//$( this ).attr( "ui-state-default" );
		}
	}).disableSelection();

	//mode edit button click
	$("#mode_edit").bind("click",function(){
		$("#layoutui li").css({
			"background-color":"#efefef",
			"border":"dotted thin grey"
		});
		$("#layoutui li").addClass("ui-state-default");
		//alert($("#layoutui li").html());
		//$.parser.parse();

		$.parser.parse($("#layoutui ol"));
	})
	//mode view button click
	$("#mode_view").bind("click",function(){
		$("#layoutui li").css({
			"background-color":"#ffffff",
			"border":"none"
		});
		//$("#layoutui li").removeAttr("class");
		$("#layoutui li").addClass("ui-state-default");
	})


	var element_current = null;
	var label_current = null;
	var column_current = null;

	//image属性编辑框
	function editImgUI(column,image){
		$('#editImgUI').dialog({
			autoOpen: false,
			width:600,
			show: {
				effect: "blind",
				duration: 1000
			},
			hide: {
				effect: "explode",
				duration: 1000
			},
			buttons: {
				"确定": function() {
					var editImgUI_Style = $("#editImgUI_Style").val();
					if (editImgUI_Style != '') {
						editImgUI_Style = JSON.parse(editImgUI_Style);
						image.attr(editImgUI_Style);
					}
					$(this).dialog( "close" );
				},
				"取消": function() {
					$(this).dialog( "close" );
				}
			}
		});
		$( "#editImgUI" ).dialog( "open" );


	}

	//chart属性编辑框
	function editChartUI(column,iframe){
		$('#editChartUI').dialog({
			autoOpen: false,
			width:600,
			show: {
				effect: "blind",
				duration: 1000
			},
			hide: {
				effect: "explode",
				duration: 1000
			},
			buttons: {
				"确定": function() {
					var editChartUI_Style = $("#editChartUI_Style").val();
					if (editChartUI_Style != '') {
						editChartUI_Style = JSON.parse(editChartUI_Style);
						iframe.attr(editChartUI_Style);
					}
					$(this).dialog( "close" );
				},
				"取消": function() {
					$(this).dialog( "close" );
				}
			}
		});
		$( "#editChartUI" ).dialog( "open" );


	}

	//text属性编辑框
	function editTextUI(column,label){
		$('#editTextUI').dialog({
			autoOpen: false,
			width:600,
			show: {
				effect: "blind",
				duration: 1000
			},
			hide: {
				effect: "explode",
				duration: 1000
			},
			buttons: {
				"确定": function() {
					var editTextUI_TextValue = $("#editTextUI_TextValue").val();
					label.html(editTextUI_TextValue);
					var editTextUI_Style_label = $("#editTextUI_Style_label").val();
					if (editTextUI_Style_label != '') {
						editTextUI_Style_label = JSON.parse(editTextUI_Style_label);
						label.css(editTextUI_Style_label);
					}
					$(this).dialog( "close" );
				},
				"取消": function() {
					$(this).dialog( "close" );
				}
			}
		});
		$( "#editTextUI" ).dialog( "open" );
	}

	//应用效果：data-options apply button click
	$("#applyCSSBtn").bind("click",function(){
		if(column_current == null){return;}
		if(element_current == null){return;}
		if(label_current == null){return;}

		var data_options = $("#contorller_dataoptions").combobox('getValues');
		if(data_options != null && data_options!=''){
			data_options = ""+data_options;
			if(data_options.substring(0,1)==','){
				data_options = data_options.substring(1);
			}
			data_options = "{"+data_options+"}";
			var jsonParam = JSON.parse(data_options);
			element_current.attr("data-options",data_options);//备份，后面要传服务器
			//alert(data_options);
			//element_current.textbox(jsonParam);
			setDataoption2Element(element_current,jsonParam);
		}

		//名称变动 columnName
		var columnName = $("#contorller_columnName").textbox('getValue');
		if(columnName != null && columnName!=''){
			element_current.attr("uiname",columnName);
		}
		//名称变动 columnNameShow
		var columnNameShow = $("#contorller_columnNameShow").textbox('getValue');
		if(columnNameShow != null && columnNameShow!=''){
			label_current.text(columnNameShow);
		}
		//contorller_columnTip
		var columnTip = $("#contorller_columnTip").textbox('getValue');
		column_current.attr("title",columnTip);

		//div-style
		var contorllerDivStyle = $("#contorller_div_style").textbox('getValue');
		column_current.attr("style",contorllerDivStyle);

	});

	$("#deleteUI").bind("click",function(){
		if(column_current==null || column_current==""){
			return;
		}
		column_current.remove();
	});


	//窗口样式应用效果
	$("#applyLayoutCSSBtn").bind("click",function(){
		var div_style = $("#contorller_layoutdiv_style").textbox('getValue');
		if(div_style != null && div_style!=''){
			//var jsonParam = JSON.parse(div_style);
			$("#layoutui").attr("style",div_style);
		}


	});



	//清空所有属性
	function clearProperties(){
		$("#contorller_columnName").textbox("setValue","");
		$("#contorller_columnNameShow").textbox("setValue","");
		$("#contorller_columnTip").textbox("setValue","");
		$("#contorller_div_style").textbox("setValue","");
		$("#contorller_dataoptions").combobox("setValue","'':''");
	}

	function setDataoption2Element( element1, jsonParam){
		if(element1 == null){return;}
		var elementClass = element1.attr('class');
		if(elementClass.indexOf("easyui-validatebox") != -1){
			element1.validatebox(jsonParam);
		}
		else if(elementClass.indexOf("easyui-combobox") != -1){
			element1.combobox(jsonParam);
		}
		else if(elementClass.indexOf("easyui-textbox") != -1){
			element1.textbox(jsonParam);
		}
		else if(elementClass.indexOf("easyui-passwordbox") != -1){
			element1.passwordbox(jsonParam);
		}
		else if(elementClass.indexOf("easyui-datebox") != -1){
			element1.datebox(jsonParam);
		}
		else if(elementClass.indexOf("easyui-datetimebox") != -1){
			element1.datetimebox(jsonParam);
		}

	}

	//生成样式json
	function genDataOptions(){
		var jsonArr = [];
		$("#layoutui ol li").each(function(i){
			var label = $(this).find("label");
			var input = $(this).find("input");
			var columnTip = $(this).attr("title");
			//
			var jsonObj = {};
			jsonObj.columnNameShow = label.text();
			jsonObj.columnName = input.attr("uiname");
			jsonObj.columnTip = columnTip;
			var uiClass = input.attr("class");
			if(uiClass!=null && uiClass!=''){
				uiClass = uiClass.substring(0,uiClass.indexOf(" "));
				jsonObj.columnUIClass = uiClass;
			}
			jsonObj.dataOptions = input.attr("data-options");
			jsonObj.columnLayoutStyle = $(this).attr("style");
			jsonArr.push(jsonObj)
		});
		var jsonArrStr = JSON.stringify(jsonArr);
		//加上窗口style
		var jsonStyleObj = {
			uiStyle:jsonArrStr,
			layoutStyle:$("#contorller_layoutdiv_style").textbox("getValue"),
			isdialog4AddDialog:$("#isdialog_adddialog").textbox("getValue"),
			keyRandom:_keyRandom
		}
		var jsonStyleStr = JSON.stringify(jsonStyleObj);
		return jsonStyleStr;
	}

	//submit button
	$("#genSystemStyleBtn").bind("click",function(){
		var jsonStr = genDataOptions();
		$("#controller_final_style").textbox("setValue",jsonStr);
	});

	//submit button
	$("#submit").bind("click",function(){
		var jsonStyleStr = $("#controller_final_style").textbox("getValue");
		var jsonStyleObj = JSON.parse(jsonStyleStr);
		$.ajax({
			type:"POST",
			url:saveStyleUrl,
			dataType:"json",
			data:jsonStyleObj,
			success:function(msg){
				alert(msg);
			},
			error:function(er){
				alert(JSON.stringify(er));
			}
		});

	});


});